// 初始化Three.js场景
let container = document.getElementById('three-container');
const scale = 2;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);

// 初始化相机
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 5;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// 创建无人机模型 (简化版)
function createDrone() {
    const group = new THREE.Group();
   
    
    // 中心主体
    const bodyGeometry = new THREE.BoxGeometry(1* scale, 0.2* scale, 1* scale);
    const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 });
    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
    group.add(body);
    
    // 四个螺旋桨
    const propellerGeometry = new THREE.CylinderGeometry(0.2* scale, 0.2* scale, 0.05* scale, 32);
    const propellerMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
    
    for (let i = 0; i < 4; i++) {
        const propeller = new THREE.Mesh(propellerGeometry, propellerMaterial);
        const angle = Math.PI / 2 * i;
        propeller.position.x = Math.cos(angle) * 0.8* scale;
        propeller.position.z = Math.sin(angle) * 0.8* scale;
        propeller.position.y = 0.15* scale;
        group.add(propeller);
    }
    
    // 添加支撑臂
    const armGeometry = new THREE.CylinderGeometry(0.02* scale, 0.02* scale, 0.8* scale, 8);
    const armMaterial = new THREE.MeshPhongMaterial({ color: 0x555555 });
    
    for (let i = 0; i < 4; i++) {
        const arm = new THREE.Mesh(armGeometry, armMaterial);
        const angle = Math.PI / 2 * i;
        arm.rotation.z = angle;
        arm.position.x = Math.cos(angle) * 0.4* scale;
        arm.position.z = Math.sin(angle) * 0.4* scale;
        arm.rotation.x = Math.PI / 2;
        group.add(arm);
    }
    
    return group;
}

const drone = createDrone();
scene.add(drone);

// 添加坐标轴辅助
const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);

// 处理窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
});

// // WebSocket连接
// const ws = new WebSocket('ws://' + window.location.hostname + '/ws');

// ws.onmessage = (event) => {
//     try {
//         const data = JSON.parse(event.data);
        
//         // 更新显示数据
//         document.getElementById('yaw').textContent = data.yaw.toFixed(1);
//         document.getElementById('pitch').textContent = data.pitch.toFixed(1);
//         document.getElementById('roll').textContent = data.roll.toFixed(1);
        
//         // 更新无人机姿态
//         // Three.js使用ZXY顺序的欧拉角
//         drone.rotation.set(
//             THREE.MathUtils.degToRad(data.pitch),
//             THREE.MathUtils.degToRad(-data.yaw),
//             THREE.MathUtils.degToRad(data.roll)
//         );
//     } catch (e) {
//         console.error('Error parsing data:', e);
//     }
// };

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();